<template>
  <div>
    <main>
      <div class="title">
        <span>购买课程回放列表</span>
      </div>
      <div class="cate">
        <span
          :class="{ selected: selected == 'all' }"
          class="search_all"
          @click="searchAll"
          >全部课程</span
        >
        <span
          :class="{ selected: selected == 'pte' }"
          class="search_pte"
          @click="searchPte"
          >PTE课程</span
        >
        <span
          :class="{ selected: selected == 'ielts' }"
          class="search_ielts"
          @click="searchIET"
          >雅思课程</span
        >
        <span
          :class="{ selected: selected == 'vip' }"
          class="search_vip"
          @click="searchVip"
          >一对一课程</span
        >
        <span
          :class="{ selected: selected == 'ccl' }"
          class="search_ccl"
          @click="searchCCL"
          >CCL课程</span
        >
        <span
          :class="{ selected: selected == 'special' }"
          class="search_special"
          @click="searchSpecial"
          >专属服务</span
        >
      </div>
      <div class="courselist">
        <ul v-if="selected == 'all'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>
        <ul v-if="selected == 'pte'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>
        <ul v-if="selected == 'ielts'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>

        <ul v-if="selected == 'ccl'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>
        <ul v-if="selected == 'vip'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>
        <ul v-if="selected == 'special'">
          <!-- 循环 -->
          <li
            @click="toPlay(item, item.id)"
            v-for="(item, index) in playbackList"
            :key="index"
          >
            <span class="imgshow">
              <img v-lazy="item.image ? item.image : ''" alt="" />
            </span>
            <div>
              <span class="bt">{{ item.name }}</span>
              <span class="intro">{{ item.content }}</span>
            </div>
          </li>
        </ul>
        <h1 class="no_data" v-if="!playbackList.length">暂无数据</h1>
      </div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      playbackList: [],
      selected: 'all',
      flag: false,
      params: {
        video_skUrl: '',
        video_url: '',
        video_poster: '',
        name: '',
        content: '',
        playNum: '',
        endDate: '',
        teacherImg: '',
        teacherName: ''
      }
    }
  },
  created () {
    // this.getCourseVideoRecord()
    this.searchAll()
  },
  methods: {
    // 搜索全部课程回放列表
    searchAll () {
      // console.log('all');
      this.selected = 'all'
      this.getCourseVideoRecord('')
    },
    // 搜索雅思回放课程列表
    searchIET () {
      // console.log('ielts');
      this.selected = 'ielts'
      this.getCourseVideoRecord('4')
    },
    // 搜索PTE课程回放列表
    searchPte () {
      // console.log('pte');
      this.selected = 'pte'
      this.getCourseVideoRecord('2')
    },
    // 搜索一对一课程回放列表
    searchVip () {
      // console.log('vip');
      this.selected = 'vip'
      this.getCourseVideoRecord('3')
    },
    // 搜索CCL课程回放列表
    searchCCL () {
      // console.log('ccl');
      this.selected = 'ccl'
      this.getCourseVideoRecord('5')
    },
    // 搜索专属服务课程回放列表
    searchSpecial () {
      // console.log('special');
      this.selected = 'special'
      this.getCourseVideoRecord('6')
    },
    getCourseVideoRecord (type) {

      this.playbackList = []
      sendPost(api.getCourseVideoRecord, {
        type: type,
        rows: 12,
        page: 1
      }).then(res => {
        // this.playbackList= res.data.list
        res.data.list.forEach(item => {
          if (item !== null) {
            this.playbackList.push(item)
            // this.playbackList= new Set(this.playbackList)
          }
        })
      })
      this.playbackList = Array.from(new Set(this.playbackList))

    },
    // 
    toPlay (item, id) {
      var that = this
      console.log(item);
      if (item.url) {
        that.params.video_url = item.url
      }
      if (item.skUrl) {
        that.params.video_skUrl = item.skUrl
      }
      if (item.image) {
        that.params.video_poster = item.image
      }
      if (item.teacherImg) {
        that.params.teacherImg = item.teacherImg
      }
      if (item.teacherName) {
        that.params.teacherName = item.teacherName
      }
      if (item.endDate) {
        that.params.endDate = item.endDate
      }


      that.params.num = item.num
      that.params.name = item.name
      that.params.content = item.content
      that.params.playNum = item.playNum




        this.$router.push('videoplay?id=' + item.id)
    }
  }
}
</script>

<style lang="less" scoped>
.no_data {
  font-size: 1rem;
  color: #666;
  padding: 1rem;
}
.selected {
  background-color: #ff5e4e;
  color: #fff;
}
main {
  padding: 1.875rem 1.125rem;
  box-sizing: border-box;
  .title {
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 1.75rem;
    display: flex;
  }
  .cate {
    display: flex;
    .search_pte {
      width: 7rem;
      height: 2.5rem;
      line-height: 2.5rem;
      font-weight: normal;
      cursor: pointer;
      border: 1px solid #eee;
      text-align: center;
      border-right: none;
      border-bottom: none;
      font-size: 1rem;
    }
    .search_vip,
    .search_ccl,
    .search_special,
    .search_ielts {
      width: 7rem;
      height: 2.5rem;
      line-height: 2.5rem;
      font-weight: normal;
      cursor: pointer;
      text-align: center;
      border: 1px solid #eee;
      border-bottom: none;
      font-size: 1rem;
      border-right: none;
    }
    .search_special {
      border-right: 1px solid #eee;
    }
    .search_all {
      width: 7rem;
      height: 2.5rem;
      line-height: 2.5rem;
      font-weight: normal;
      cursor: pointer;
      text-align: center;
      border: 1px solid #eee;
      border-bottom: none;
      border-right: none;
      font-size: 1rem;
    }
  }
  .courselist {
    border-top: 1px solid #eee;
    // height: 18rem;
    box-sizing: border-box;
    ul {
      :nth-child(3n) {
        margin-right: 0;
      }
      li {
        display: inline-block;
        width: 16.25rem;
        height: 15.9375rem;
        border: 1px solid #eee;
        box-sizing: border-box;
        margin-top: 1.25rem;
        margin-right: 2.9375rem;
        cursor: pointer;
        .imgshow {
          display: inline-block;
          height: 9.4375rem;
          width: 100%;
          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
          .time {
            width: 3.75rem;
            height: 1.5rem;
            background-color: #8d8d8f;
            line-height: 1.5rem;
            text-align: center;
            color: #fff;
            font-size: 1rem;
            position: absolute;
            right: 0.625rem;
            bottom: 0.625rem;
          }
        }
        div {
          padding: 0.9375rem;
          box-sizing: border-box;
          color: #666;
          .bt {
            font-size: 1.25rem;
            display: flex;
            height: 1.875rem;
            overflow: hidden;
            margin-bottom: 0.625rem;
          }
          .intro {
            font-size: 0.875rem;
            display: inline-block;
            height: 2.5rem;
            overflow: hidden; /*超出部分隐藏*/
            white-space: wrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
          }
        }
      }
    }
  }
}
</style>
